<template>
  <div>
    <!-- 按钮 -->
    <el-button style="margin:10px 10px" type="primary" icon="el-icon-refresh-right" circle
      @click="getPenaltyList"></el-button>
    <!-- 表格 
      data 展示数据 —— 数组类型
    -->
    <el-table style="width: 100%;" border :data="list">
      <el-table-column prop="id" label="id" align="center" width="100">
      </el-table-column>
      <el-table-column prop="nickName" label="用户昵称" align="center" width="200">
      </el-table-column>
      <!-- <el-table-column prop="type" label="处罚类型" align="center">
      </el-table-column> -->
      <el-table-column prop="name" label="处罚名称" align="center" width="250">
      </el-table-column>
      <el-table-column prop="reason" label="处罚内容" align="center">
      </el-table-column>
      <el-table-column prop="operateTime" label="处罚时间" align="center" width="200">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination style="margin-top:20px;textAlign:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name:'Reportlist',
  data(){
    return{
      //页码
      pageNumber: 1,
      //每页数量
      pageSize: 10,
      //总条数
      total: 0,
      //列表数据
      list: []
    }
  },
  mounted() {
    this.getPenaltyList()
  },
  methods:{
    async getPenaltyList() {
      let res = await this.$API.report.getPenaltyList({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      })
      this.total = res.data.sumLine;
      this.list = res.data.rows;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNumber = val
    }
  }
}
</script>

<style>
  
</style>